import React, { Component } from 'react'
import Header from '../../components/Header/header'

import { Tabs } from 'antd-mobile/es/components/tabs/tabs';
import { Button, Mask, Popup, Toast } from 'antd-mobile';

import { imgPre } from "../../request/http";
import kefu from '../../assets/img/button_shortcut1.png';
import dianpu from '../../assets/img/button_shortcut2.png';
import shopcar from '../../assets/img/button_shortcut3.png';

import { Link } from 'react-router-dom';
import './detail.less'

import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import {
  actions,
  getGoodsinfo,
  getVisible,
  getNum,
  getArr
} from '../../store/modules/detail'

class detail extends Component {
  componentDidMount() {
    let id = this.props.match.params.id;
    this.props.detail.requestInfo(id);
  }
  render() {
    console.log(this.props);
    let {
      ginfo,
      visible,
      num,
      arr,
      detail: {
        changeVisible,
        changeNum,
        requestAddcart
      },
      match: {
        params: { type }
      }
    } = this.props;
    return (
      <div className='detail'>
        <Header title="商品详情" back></Header>

        <div className='nav'>
          <Tabs>
            {arr.map((item, index) => {
              return (
                <Tabs.Tab title={item} key={index}>
                </Tabs.Tab>
              )
            })}
          </Tabs>
        </div>

        <div className='img'>
          <img src={imgPre + ginfo.img} alt="" />
        </div>
        <div className='price'>
          <div className='pricename'>{ginfo.goodsname}</div>
          <div className='pricekill'>秒杀价：{ginfo.price}</div>
          <del className='pricefirst'>原价：{ginfo.market_price}</del>
          <p>{ginfo.description}</p>
        </div>

        {/* 弹窗部分 */}
        {/* 遮罩层 */}
        <Mask visible={visible} onMaskClick={() => changeVisible(false)} />
        {/* 弹窗 */}
        <Popup
          visible={visible}
          onMaskClick={() => changeVisible(false)}
          bodyStyle={{ height: '40vh' }}
        >
          <div className='nums'>
            购买数量：
            <span>
              {/* {num} */}
              <button onClick={() => changeNum(num - 1)}>-</button>
              <input type="text" value={num} onChange={() => { }} />
              <button onClick={() => changeNum(num + 1)}>+</button>
            </span>
          </div>
          <div className='sure' onClick={() => requestAddcart(type)}>确定</div>
        </Popup>

        {/* 购买底部标签 */}
        <footer className='shopfooter'>
          <Link to="" className='one'>
            <img src={kefu} alt="" />
            <div>客服</div>
          </Link>
          <Link to="" className='one'>
            <img src={dianpu} alt="" />
            <div>店铺</div>
          </Link>
          <Link to="/index/shop" className='one'>
            <img src={shopcar} alt="" />
            <div>购物车</div>
          </Link>
          <div className='two1'>
            <div onClick={() => changeVisible(true)}>加入购物车</div>
          </div>
          <div className='two2'>
            <div>立即购买</div>
          </div>
        </footer>
      </div>
    )
  }
}
//取数据
const mapStateToProps = (state) => {
  return {
    ginfo: getGoodsinfo(state),
    visible: getVisible(state),
    num: getNum(state),
    arr: getArr(state)
  };
};
//取方法
const mapDispatchToProps = (dispatch) => {
  return {
    detail: bindActionCreators(actions, dispatch),
  };
};


export default connect(mapStateToProps, mapDispatchToProps)(detail);
